<template>
    <div class="share mt-10">
        <div class="my-box">
            <div class="tip c-title-4 c-bold">
                <!-- 我的专属分享方式 -->
                {{ $t("message.Share.a") }}
            </div>
            <div class="s-box">
                <div class="b-txt1">
                    <!-- 推荐链接 -->
                    {{ $t("message.Share.b") }}
                </div>
                <div class="b-ipt-box">
                    <!-- <input type="text" class="ipt" placeholder="请输入您的邮箱或手机号" />
                    <div class="ipt-btn">复制</div> -->
                    <!-- <JInput :disabled="true" v-model="link" class="b-txt" button="复制" placeholder="请输入您的邮箱" @change="onCopy(link)"></JInput> -->
                    <JInput :disabled="true" v-model="link" class="b-txt" :button="$t('message.Share.d')" :placeholder="$t('message.Share.e')" @change="onCopy(link)"></JInput>
                </div>
            </div>
            <div class="s-box">
                <div class="b-txt1">
                    <!-- 邀请码 -->
                    {{ $t("message.Share.c") }}
                </div>
                <div class="b-ipt-box" v-if="user.info">
                    <!-- <input type="text" class="ipt" placeholder="请输入您的邮箱或手机号" />
                    <div class="ipt-btn">复制</div> -->
                    <!-- <JInput :disabled="true" class="b-txt" button="复制" placeholder="请输入您的邀请码" v-model="user.info.recommendCode" @change="onCopy(user.info.recommendCode)"></JInput> -->
                    <JInput
                        :disabled="true"
                        class="b-txt"
                        :button="$t('message.Share.d')"
                        :placeholder="$t('message.Share.f')"
                        v-model="user.info.recommendCode"
                        @change="onCopy(user.info.recommendCode)"
                    ></JInput>
                </div>
            </div>
            <div class="btns">
                <ShareNetwork
                    v-for="item in icons"
                    :network="item.name"
                    :url="ShareDate.url"
                    :title="ShareDate.title"
                    :description="ShareDate.description"
                    :quote="ShareDate.quote"
                    :hashtags="ShareDate.hashtags"
                    @open="reload"
                >
                    <img class="btn-s" :src="item.icon" />
                </ShareNetwork>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from "vue";
import { useAccount } from "@/stores/account";
import JInput from "@/components/j-input/index.vue";
import { useUser } from "@/stores/user";
import { copyTextToClipboard } from "@/comm/copy";
import { toast } from "@/components/toast/toast";
import face from "./img/face.png";
import twt from "./img/twt.png";
import tel from "./img/tel.png";
import i18n from "@/locals";
import { reload } from "@/comm/tools";
import { Notify } from "@/components/y-notify/script";

const account = useAccount();
const user = useUser();

const myAccount = ref("1221223@google.com");

const onFacebook = () => {
    account.changePopBindFacebook(true);
};

const link = computed(() => {
    if (user.info && user.info.recommendCode) {
        return location.origin + "/recommend/" + user.info.recommendCode;
    }
    return "";
});

const onCopy = (txt: string) => {
    copyTextToClipboard(txt);
    Notify.alert("内容已經複製");
};

const items = ref([
    {
        // title: "主頁",
        title: i18n.global.t("message.Global.Home"),
        disabled: false,
        href: "/"
    },
    {
        // title: "獎勵中心",
        title: i18n.global.t("message.Global.child.j"),
        disabled: true,
        href: ""
    }
]);
interface IconType {
    icon: string;
    name: string;
}
const icons: IconType[] = [
    // { icon: link, name: "link" },
    { icon: face, name: "facebook" },
    { icon: twt, name: "twitter" },
    { icon: tel, name: "telegram" }
    // { icon: download, name: "download" },
];
const ShareDate = {
    url: "https://www.youtube.com/shorts/IRExLAY_-G4",
    title: "标题文本内容",
    hashtags: "标签内容",
    description: "描述文本内容",
    quote: ""
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
